<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html lang="en">
<head>
	<style>
		::-webkit-scrollbar {  
		    display: none;  
		}
		
		.container {  	
		  display: flex;  
		  align-items: center; /* 垂直居中对齐 */  
		}  
			
		   /* 针对所有现代浏览器 */  
		   input::placeholder {  
		        color: #CCCCCC;  
		    } 
			
		.user {  	
		  padding: 8px; /* 内边距 */  
		  font-size: 14px; /* 字体大小 */  
		}  
		  
		.canvas-element {  
		  border: 1px solid #fff; /* 边框 */  
		  margin-left: 20px; /* 在 <input> 和 <canvas> 之间增加一些间距  */
	}  
		
	</style>
	
		
<title>Classic Login Form Responsive Widget Template :: w3layouts</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Classic Login Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tag Keywords -->

<!-- css files -->
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <!-- Style-CSS --> 
<link rel="stylesheet" href="css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->
<!-- //css files -->

<!-- js -->
	
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.6.3/layui.js"></script>
<!-- //js -->
	
<!-- online-fonts -->
<link href="//fonts.googleapis.com/css?family=Oleo+Script:400,700&amp;subset=latin-ext" rel="stylesheet">
<!-- //online-fonts -->
</head>
<body>
<script src="js/jquery.vide.min.js"></script>
	<!-- main -->
	<div data-vide-bg="video/Ipad.mp4" >	
			
		<div class="center-container">
			<!--header-->
			<div class="header-w3l" style="margin-left:20px;">
				<h1>麦兜后台管理登录</h1>
			</div>
			<!--//header-->
			<div class="main-content-agile" style="margin-top:60px;">
				<div class="sub-main-w3">	
					<div class="wthree-pro">
						<h2>Login Here</h2>
					</div>
					<form onsubmit="handleSubmit(event)" novalidate ">
						<input placeholder="Username" name="userName" value="" class="user" type="email">
						<span class="icon1"><i class="fa fa-user" aria-hidden="true"></i></span><br><br>

						<input  placeholder="password" required name="passWord" value="" class="pass" type="password">
						<span class="icon2"><i id="mylock" class="fa fa-lock" aria-hidden="true"></i></span><br><br>
									
						
						<div class="container">  
						  <input type="email" name="ucode"   placeholder="请输入验证码" maxlength="4" class="user" style="border: 1px solid #FFFFFF;border-top: none;border-left: none;border-right: none;">  
						  <canvas id="canvas" class="canvas-element" onclick="dj()" width="115px" height="50"></canvas>
						</div>		


						<ul class="agileinfotickwthree" style=" margin-top:20px;">
							<li>	
								<input type="checkbox" id="brand1" name="remchk">
								<label for="brand1"><span></span>记住我</label>
								<a href="#">忘记密码?</a>
							</li>
						</ul>

						<div class="sub-w3l" style=" margin-bottom: 20px;">
							<div class="right-w3l" style="margin-top: 10px;">
								<input type="submit"  id="login" value="Login">
							</div>
						</div>
					</form>
				</div>
			</div>
			<!--//main-->	
				
			
			<!--footer-->
			<div class="footer">
<!-- 				<p>&copy; 2017 Classic Login Form. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p> -->
			</div>
			<!--//footer-->
					

		</div>
	 </div>  


		<script>	
			 layui.use(['form','jquery'],function (){
			            var $=layui.jquery,
						form = layui.form,
			            layer = layui.layer;
				
				$("input[name='userName']").focus();

				$('#mylock').on('click',function(){
					 if ($(this).hasClass('fa fa-lock')) {
						 $(this).removeClass('fa fa-lock');
						 $("input[name='password']").attr('type', 'email');
						 $(this).addClass('fa fa-unlock');
				    } else{
						$(this).removeClass('fa fa-unlock');
						$("input[name='password']").attr('type', 'password');	
						$(this).addClass('fa fa-lock');	
					}
				})
				 //密码显示 
				
					
				$('#brand1').on('click',function(){
					if($(this).prop('checked')){	
						// console.log("rem checked....")
						ensurechk=true;
					}else{
						// console.log("rem canlce checked....")	
					}
				 })	
				 //复选框选中

			})	
			

			  var account=JSON.parse(sessionStorage.getItem("account"));	
			  if(account!=null){
				if(account.remchk==="on"){
				$("input[name='userName']").val(account.userName)
				$("input[name='passWord']").val(account.passWord)
				$("#brand1").prop("checked","on");
				}else{
				$("input[name='userName']").val()
				$("input[name='passWord']").val()
				$("#brand1").prop("checked","");	
				}
			 } 					
			  //是否记住登录	
			 					
				var ensurechk=false;				
				function handleSubmit(event) {
						let code="";
						for (let i = 0; i < show_num.length; i++) {
						code+=show_num[i];
						}	//遍历获取验证码
						code=code.toUpperCase()//转化为大写	

				        // 阻止表单的默认提交行为（如果需要）  
				         event.preventDefault();  
						let userName=$("input[name='userName']").val();
						let passWord=$("input[name='passWord']").val();
						let userCode=$("input[name='ucode']").val()	
						if(userName===""){
							layer.msg('用户名不能为空',{icon:5,time:1000,shift:6});
							return false;	
						}
						if(passWord===""){
							layer.msg('密码不能为空',{icon:5,time:1000,shift:6});
							return false;	
						} 
						if(userCode===""){
							layer.msg('验证码不能为空',{icon:5,time:1000,shift:6});
							return false;	
						}
						if(userCode.toUpperCase()!=code){
							layer.msg('验证码有误',{icon:5,time:1000,shift:6});
							draw(show_num);
							return false;
						}


						// 创建一个空对象来存放转换后的数据
						let obj = {}; 				 
				        // 获取表单数据  
				        let formData = new FormData(event.target);  
				        // 示例：将表单数据输出到控制台  
				        for (let [key,value] of formData.entries()) {  
						   if(key==='ucode'){
							   continue;
						   }	
				           obj[key]=value;
				        }  

						$.ajax({
						type:"post",
						url:"http://localhost:8080/restaurant_web_war_exploded/account/login",
						data:{account:userName,pwd:passWord},
						success:function (res){

							if(res.errorCode==201){
								//ajax 异步请求。。。
								let myUser=JSON.stringify(obj);				
								layer.msg('登录成功',{icon:6,time:2000,shift:6},function(){
								location.href='index.html'
								})
								sessionStorage.setItem("account",myUser);
								// 如果不阻止默认行为，表单将按照其action属性指定的URL进行提交  
							 }else{
								layer.msg(res.message,{icon:5,time:1000,shift:6});
							 }
						   }
            	        })

					} 
				//表单提交 									
											
				

				let show_num=[];
				draw(show_num);
				function dj(){
					draw(show_num);
				}
				function draw(show_num){
					var canvas_width=document.getElementById("canvas").clientWidth;
					var canvas_height=document.getElementById("canvas").clientHeight;
					var canvas=document.getElementById("canvas");//获取到canvas的对象，演员
					var context=canvas.getContext("2d");//获取到canvas图像的环境，演员表演的舞台
					canvas.width=canvas_width;
					canvas_height=canvas_height;
					var sCode="Z,X,C,V,B,N,M,A,S,D,F,G,H,J,K,L,Q,W,E,R,T,Y,U,I,O,P,1,2,3,4,5,6,7,8,9,0,z,x,c,v,b,n,m,a,s,d,f,g,h,j,k,l,q,w,e,r,t,y,u,i,o,p";
					var aCode=sCode.split(",");
					var aLength=aCode.length;//获取到数组的长度
					
					for (var i = 0; i <=3; i++) {
						var j=Math.floor(Math.random()*aLength);//获取到随机的索引值(不包含上限)
						var deg=Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
						var txt=aCode[j];//得到随机的一个内容
						show_num[i]=txt;
						var x=10+i*20;//文字在canvas上的坐标
						var y=20+Math.random()*8;//文字在canvas上的y坐标
						context.font="bold 23px 微软雅黑";
						
						context.translate(x,y);
						context.rotate(deg);
							
						context.fillStyle=randomColor();
						context.fillText(txt,0,0);
						
						context.rotate(-deg);
						context.translate(-x,-y);
					}
					for (var i = 0; i <=5; i++) {//验证码上显示线条
							context.strokeStyle=randomColor();
							context.beginPath();
							context.moveTo(Math.random()*canvas_width,Math.random()*canvas_height);
							context.lineTo(Math.random()*canvas_width,Math.random()*canvas_height);
							context.stroke();
						}
					for (var i = 0; i <=30; i++) {//验证码上显示小点
						context.strokeStyle=randomColor();
						context.beginPath();
						var x=Math.random()*canvas_width;
						var y=Math.random()*canvas_height;
						context.moveTo(x,y);
						context.lineTo(x+1,y+1);
						context.stroke();
					}
				}//验证码
				function randomColor(){//得到随机的颜色值
					var r=Math.floor(Math.random()*256);
					var g=Math.floor(Math.random()*256);
					var b=Math.floor(Math.random()*256);
					return "rgb("+r+","+g+","+b+")";
				}	
			  //验证码		
		</script>	
</body>
</html>